<template>
  <Table v-bind="$attrs" v-on="$listeners" :max-height="height" ref="table">
    <slot></slot>
  </Table>
</template>

<script>
import {Table} from 'element-ui'

export default {
  components: {Table},
  name: "el-table",
  props: {
    maxHeight: {
      default: ''
    }
  },
  data() {
    return {
      offsetTop: 0,
      innerHeight: window.innerHeight
    }
  },
  computed: {
    height() {
      let height = 200
      if (this.maxHeight) return this.maxHeight
      else height = this.innerHeight - this.offsetTop - 180;
      if (height < 200) height = 200
      return height
    },
    toggleRowSelection() {
      return this.$refs.table.toggleRowSelection
    },
    clearSelection() {
      return this.$refs.table.clearSelection
    },
    toggleAllSelection() {
      return this.$refs.table.toggleAllSelection
    },
    toggleRowExpansion() {
      return this.$refs.table.toggleRowExpansion
    },
    setCurrentRow() {
      return this.$refs.table.setCurrentRow
    },
    clearSort() {
      return this.$refs.table.clearSort
    },
    clearFilter() {
      return this.$refs.table.clearFilter
    },
    doLayout() {
      return this.$refs.table.doLayout
    },
    sort() {
      return this.$refs.table.sort
    }
  },

  mounted() {
    !this.maxHeight && this.$nextTick(() => {
      this.offsetTop = this.$refs.table.$el.offsetTop
      let self = this
      window.onresize = function () {
        self.innerHeight = window.innerHeight
      }
      this.$root.$on('tableTopChange', () => {
        this.$nextTick(() => {
          this.$refs.table && (this.offsetTop = this.$refs.table.$el.offsetTop)
        })
      })
    })
  }
}
</script>
